<!--关联警情列表 -->
<template>
    <div class="page correlatedAlarm-page" data-page="correlatedAlarm-page" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-search">
        	<span class="tt">关联警情<label class="alarmTotal" id="alarmTotal_{{getNewId}}"></label></span>
        </div>
        <div class="page-content infinite-scroll-content ptr-content" style="padding-bottom: 150px;" 
            data-infinite-distance="100"
            @infinite="loadMoreList">
            <div class="list media-list" style="margin-top: 0px;">
                <ul class="alarm-list" id="alarm-list_{{getNewId}}"></ul> 
                <div id="correlatedAlarm_preloader_{{getNewId}}" class="preloader infinite-scroll-preloader"></div>
            </div>
        </div>
        <div class="toolbar tabbar tabbar-labels toolbar-bottom-md" id="maintain_bottom_nav_{{getNewId}}" style="height: 60px;z-index: 9999;bottom:-1px !important;">
	      <div class="toolbar-inner">
	          <div class="tab-link selectAll">
	          	<label class="checkbox">
	            	<input type="checkbox" value="0" @change="selectAlarmAll" id="selectAllAlarm_{{getNewId}}"/>
	            	<i class="icon-checkbox"></i>
	              </label>
	              &nbsp;&nbsp;全选
	          </div>
	          <a href="#" class="tab-link" >
	              <span class="selectNum">已选选择 <i id="selectCheckAlarmNum_{{getNewId}}">0</i> 个</span>
	          </a>
	          <a href="" @click="submitAlarm" class="tab-link">
	              <div class="addOwnerBtn">确定</div>
	          </a>
	      </div>
	  </div>   
    </div>
</template>
<style scoped>
    .list .media-list{
        margin-top: 0 !important;
    }
    .list ul:before,
    .list ul:after{
        height: 0 !important;
    }
    .alarm-list {
	height: 100%;
	padding-bottom: 32px;
}

.alarm-list li {
	margin: 32px 20px 0 20px;
	position: relative;
}

.alarm-list li a {
	display: block;
	padding-bottom: 10px;
	border-bottom: 1px solid #E1E1E1;
}

.alarm-list li a .iteml {
	margin-right: 74px;
}

.alarm-list li a .itemr {
	width: 64px;
	height: 64px;
	border: 1px solid #E1E1E1;
	position: absolute;
	top: 0px;
	right: 0px;
}
.alarm-list li a .itemr img{
    height: 100%;
    width: 100%;
}
.alarm-list li a .iteml .deviceName {
	font-size: 17px;
	font-weight: 500;
	color: #000000;
}

.alarm-list li a .iteml .localtion {
	font-size: 14px;
	font-weight: 400;
	color: #999999;
	margin: 8px 0 8px 0;
}

.alarm-list li a .type-time i {
	font-size: 12px;
	margin-right: 11px;
}

.alarm-list li a .type-time label {
	font-size: 12px;
	color: rgba(153, 153, 153, 1);
}

label.alarmTotal {
	font-size: 16px;
	font-weight: 400;
	margin-left: 8px;
}

.alarm-list .checkboxDiv {
	float: left;
	height: 64px;
	margin-right: 5px;
}

.selectAll {
	width: 160px;
	margin-left: 20px;
	font-size: 17px;
}

.addOwnerBtn {
	width: 124px;
	height: 44px;
	background: rgba(36, 113, 202, 1);
	border-radius: 4px;
	color: #FFFFFF;
	font-size: 18px;
	vertical-align: middle;
	display: flex;
	justify-content: center;
	align-items: Center;
	padding-top: 2px;
	margin-top: 6px;
}

.selectNum {
	font-size: 14px !important;
	position: absolute !important;
	bottom: 20px !important;
}
</style>
<script>
    return {
        mounted() {
            var self = this;
            var app = self.$app;
            //页面传参
            self.taskId = this.$route.params.taskId;
            self.htmlType = this.$route.params.type;//0查看 1编辑
            self.taskDetailId=this.$route.params.taskDetailId;//提交接口需要参数
            self.testType=this.$route.params.testType;//单点测试：3联动测试4
            self.relateAlarmIds = this.$route.params.relateAlarmIds==0?"":this.$route.params.relateAlarmIds;//警情编码集合，多个用逗号隔开
            self.jumpName = this.$route.params.pageName;
        },
        data: function () {
            return {
              	alarmTotal:0,
              	taskIds:"", //选中的任务ID
              	relateAlarmIdMap:{},
                relateAlarmIdMapArr:[],
                pageIndex:0,
                pageSize:25,
                allowInfinite: true,
                getNewId: (new Date()).getTime()
            }
        },
        methods: {
        	getRelateAlarmListByTaskId:function(){//任务详情查看获取列表数据
                var self = this;
                var $ = self.$;
                $("#maintain_bottom_nav_"+self.getNewId).hide();
                $("#alarmTotal_"+self.getNewId).show();
                Dao.getRelateAlarmListByTaskId({
                	userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    taskId:self.taskId,
                },function(data,total) {
                    var itemTypeHtml='';
                    $("#alarmTotal_"+self.getNewId).empty().html("("+total+")");
                    if (data&&data.length > 0) {
                        if (self.pageSize * self.pageIndex + data.length < total) { //没分页
                            $("#correlatedAlarm_preloader_"+self.getNewId).show();
                            self.allowInfinite = true;
                        } else {  //有分页
                            $("#correlatedAlarm_preloader_"+self.getNewId).hide();
                            self.allowInfinite = false;
                        }
                        for(var i=0;i<data.length;i++){
                        	var icons=JSON.parse(data[i].iconUrl).icon;
                        	if(data[i].fireTTypes.indexOf("10") > -1){
                        		itemTypeHtml=`<i class="iconfont icon-APPicon_baojing" style="color:#E07762">&nbsp;报警</i>`;
                        	}else if(data[i].fireTTypes.indexOf("20") > -1){
                        		itemTypeHtml=`<i class="iconfont icon-APPicon_guzhang" style="color:#F5B923">&nbsp;故障</i>`;
                        	}else if(data[i].fireTTypes.indexOf("30") > -1){
                        		itemTypeHtml=`<i class="iconfont icon-APPicon_pingbi" style="color:#999999">&nbsp;屏蔽</i>`;
                        	}else{
                        		itemTypeHtml=`<i class="iconfont icon-APPicon_liandong" style="color:#2471CA">&nbsp;动作</i>`;
                        	}
                            $("#alarm-list_"+self.getNewId).append(`
                                <li>
                                    <a href="#">
                                        <div class="iteml">
                                            <p class="deviceName">`+data[i].fcFName+`</p>
                                            <p class="localtion">`+data[i].location+`</p>
                                            <div class="type-time">
                                                `+itemTypeHtml+`
                                                <label>发生于`+data[i].createTime+`</label>
                                            </div>
                                        </div>
                                        <div class="itemr">
                                            <img src="`+icons+`">
                                        </div>
                                    </a>
                                </li>
                            `);
                        }

                    }else {
                        self.allowInfinite = false;
                        $("#correlatedAlarm_preloader_"+self.getNewId).hide();
                        if (self.pageIndex == 0) {//暂无数据
                            $("#alarm-list_"+self.getNewId).empty();
                            $("#alarm-list_"+self.getNewId).append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                        }
                    }
                });
            },
            //编辑获取列表数据
            getMoreAlarmForTest:function(){
                var self = this;
                var $ = self.$;
                $("#maintain_bottom_nav_"+self.getNewId).show();
                $("#alarmTotal_"+self.getNewId).hide();
                let prams = {
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    type:4,
                    pageIndex:self.pageIndex,
                    pageSize:self.pageSize,
                }
                //单点测试跳过来的
                if(self.jumpName == "singleTestTask"){
                    prams.type = 3;
                    prams.taskDetailId = self.taskDetailId;
                }else{
                    prams.taskDetailId = self.taskId;
                }
                Dao.getMoreAlarmForTest(prams,function(data,total) {
                    if (data&&data.length > 0) {
                        if (self.pageSize * self.pageIndex + data.length < total) { //没分页
                            $("#correlatedAlarm_preloader_"+self.getNewId).show();
                            self.allowInfinite = true;
                        } else {  //有分页
                            $("#correlatedAlarm_preloader_"+self.getNewId).hide();
                            self.allowInfinite = false;
                        }
                    	var itemTypeHtml='';
                    	var checkBoxHtml='';
                        for(var i=0;i<data.length;i++){
                        	var icons=JSON.parse(data[i].iconUrl).icon;
                        	if(data[i].fireTTypeName=="报警"){
                        		itemTypeHtml=`<i class="iconfont icon-APPicon_baojing" style="color:#E07762">&nbsp;报警</i>`;
                        	}else if(data[i].fireTTypeName=="故障"){
                        		itemTypeHtml=`<i class="iconfont icon-APPicon_guzhang" style="color:#F5B923">&nbsp;故障</i>`;
                        	}else if(data[i].fireTTypeName=="屏蔽"){
                        		itemTypeHtml=`<i class="iconfont icon-APPicon_pingbi" style="color:#999999">&nbsp;屏蔽</i>`;
                        	}else{
                        		itemTypeHtml=`<i class="iconfont icon-APPicon_liandong" style="color:#2471CA">&nbsp;动作</i>`;
                        	}
                        	var rid = self.relateAlarmIdMap[data[i].id];
                        	if(rid!=null && rid!=""){//选中
                        		checkBoxHtml=`
                           			<div class="checkboxDiv" id="`+data[i].id+`">
        					    	<label class="checkbox">
        				            	<input type="checkbox" checked="checked" value="`+data[i].id+`"/>
        				            	<i class="icon-checkbox"></i>
        			              	</label>
        						</div>`;
                        	}else{//不选中
                        		checkBoxHtml=`
                           			<div class="checkboxDiv" id="`+data[i].id+`">
        					    	<label class="checkbox">
        				            	<input type="checkbox" value="`+data[i].id+`"/>
        				            	<i class="icon-checkbox"></i>
        			              	</label>
        						</div>`;
                        	}
                       		
                            $("#alarm-list_"+self.getNewId).append(`
                            <li>
    	                        `+checkBoxHtml+`
    							<a href="#">
    								<div class="iteml">
    									<p class="deviceName">`+data[i].fcFName+`</p>
    									<p class="localtion">`+data[i].location+`</p>
    									<div class="type-time">
    										`+itemTypeHtml+`
    										<label>发生于`+data[i].createTime+`</label>
    									</div>
    								</div>
    								<div class="itemr">
    									<img src="`+icons+`">
    								</div>
    							</a>
                            </li>
                            `);
                            var chkBox=$("#alarm-list_"+self.getNewId+" input:checked");
                        	$("#selectCheckAlarmNum_"+self.getNewId).html(chkBox.length);
                        	if($("#alarm-list_"+self.getNewId+" input[type=checkbox]").length==chkBox.length){
                        		$("#selectAllAlarm_"+self.getNewId).prop("checked", true);
                        	}else{
                        		$("#selectAllAlarm_"+self.getNewId).prop("checked", false);
                        	}
                        }
                        self.getAlarmSelectCheckBox();
                        self.selectAlarmAll();
                    }else {
                        self.allowInfinite = false;
                        $("#correlatedAlarm_preloader_"+self.getNewId).hide();
                        if (self.pageIndex == 0) {//暂无数据
                            $("#alarm-list_"+self.getNewId).empty();
                            $("#alarm-list_"+self.getNewId).append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                        }
                    }
                });
            },
            loadMoreList: function () {
              var self = this;
              if (self.allowInfinite){
                    self.allowInfinite = false;
                    self.pageIndex++;
                    self.getMoreAlarmForTest();
              }
            },
            backToTab: function() {
                app.methods.backToTab();
            },
            //全选
            selectAlarmAll:function(){
            	var self = this;
                //复选框已被选中
                if ($("#selectAllAlarm_"+self.getNewId).prop("checked") == true) {
                	$("#alarm-list_"+self.getNewId+" input[type=checkbox]").prop("checked", true);
                	$("#selectCheckAlarmNum_"+self.getNewId).html($("#alarm-list_"+self.getNewId+" input[type=checkbox]").length);
                	
                	let checkInput = $("#alarm-list_"+self.getNewId+" input:checked");
                    for ( let i = 0; i <checkInput.length; i++){
                       self.relateAlarmIdMapArr.push($(checkInput[i]).val());
                    }
                } else {
                    //复选框没被选中
                	$("#alarm-list_"+self.getNewId+" input[type=checkbox]").prop("checked", false);
                	$("#selectCheckAlarmNum_"+self.getNewId).html(0);
                	
                	self.relateAlarmIdMapArr = [];
                }
            },
            //单个复选框选中事件
            getAlarmSelectCheckBox:function(id){
                var self = this;
                $("#alarm-list_"+self.getNewId+" input[type=checkbox]").change(function(e) {
                	var chkBox=$("#alarm-list_"+self.getNewId+" input:checked");
                	$("#selectCheckAlarmNum_"+self.getNewId).html(chkBox.length);
                	if($("#alarm-list_"+self.getNewId+" input[type=checkbox]").length==chkBox.length){
                		$("#selectAllAlarm_"+self.getNewId).prop("checked", true);
                	}else{
                		$("#selectAllAlarm_"+self.getNewId).prop("checked", false);
                	}
                });
            },
            //提交
            submitAlarm:function(){
            	var self = this;
            	self.relateAlarmIdMapArr = [];
            	let checkInput = $("#alarm-list_"+self.getNewId+" input:checked");
           		for (let i = 0; i <checkInput.length; i++){
                       self.relateAlarmIdMapArr.push($(checkInput[i]).val());
                }
            	if(self.relateAlarmIdMapArr.length == 0){//选中的数据ID
            		//app.methods.showToastCenter('请选择一条数据');
            		//return;
            	}
            	Dao.saveRelateAlarmInfo({
            		taskDetailId:self.taskDetailId,//测试详情id
            		account:userInfor.accountName,//用户账号
            		alarmIds:self.relateAlarmIdMapArr.toString(),	//警情编码集合，多个用逗号隔开
                },function(data,total,info) {
                	app.methods.showToastCenter('操作成功');
                	app.router.back();
                    let fn = app.view.current.el.f7View.router.currentPageEl.f7Component;
                    //单点测试跳过来的
                    if(self.jumpName == "singleTestTask"){
                        fn.getSelectAlarmIdBySingle();
                    }else{
                        fn.getSelectAlarmIdByLink();
                    }
                });
  
            },
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                var $ = self.$;
                if(self.htmlType==0){
                	self.getRelateAlarmListByTaskId();
            	}else{
            		self.getMoreAlarmForTest();
            	}
                
                if(self.relateAlarmIds){
            		var relateAlarmIdsArr = self.relateAlarmIds.split(",");
                    self.relateAlarmIdMapArr = self.relateAlarmIdMapArr.concat(relateAlarmIdsArr);

            		for(var n=0;n<relateAlarmIdsArr.length;n++){
                		self.relateAlarmIdMap[relateAlarmIdsArr[n]]= relateAlarmIdsArr[n];
                	}
            	}
            },
        }
    }
</script>